import React, { useState, useEffect, useRef } from 'react';
import { EdrmsTypeRankStyle } from './style';
import * as echarts from 'echarts/core';
import { EdrmsTypeDto } from '@/services/types';


type EdrmsTypePiePropsType = {
    data: EdrmsTypeDto
};
type ListType = { sort: number; name: string; number: number };
const EdrmsTypeRank: React.FC<EdrmsTypePiePropsType> = (props) => {
    const { data } = props
    let edrmsTypeDataList: ListType[];
    const colors = [
        { a: '#6ED401', b: '#4AD79C' },
        { a: '#5F6DFE', b: '#6885F9' },
        { a: '#1067FF', b: '#2BD6FE' },
        { a: '#FFA701', b: '#FEDB66' },
        { a: '#0372B4', b: '#0FDED6' }, 
    ]
    edrmsTypeDataList = (data?.edrmsTypeData || []).map(item => { item.number = Number(item.perCentNumber); return item });
    return (
        <EdrmsTypeRankStyle>
            <div className='edrmsTypeRank'>
                {(edrmsTypeDataList || []).map((item, index) => (
                    <div className='rankItem' key={item.name}>
                        <div className='title' title={item.name.replace('（件）', '').replace('（卷）', '')}>{item.name.replace('（件）', '').replace('（卷）', '')}</div>
                        <div className='rankValue'>
                            <div
                                className='rankValueHigh' style={{ width: `${item.number}%`, background: `linear-gradient(90deg, ${colors[index].a} 0%, ${colors[index].b} 100%)` }}
                            ></div>
                        </div>
                        <div>{item.number}%</div>
                    </div>
                ))
                }
            </div>
        </EdrmsTypeRankStyle >
    );
};

export default EdrmsTypeRank;
